<template>
	<div>
		<view class="cu-modal bottom-modal" :class="isShow?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action" @tap="hideModal">
						<text class="lg cuIcon-close"></text>
					</view>
					<view class="action text-gray">
						实习薪酬
					</view>
					<view class="action" @tap="makeSure">
						<text class="lg cuIcon-check text-blue"></text>
					</view>
				</view>
				<view class="padding-xl content">
					<input type="number" v-model="money" placeholder="请填写实习薪酬" />
					<text>元/天</text>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			"isShow": {
				type: Boolean,
				default: false
			},
			"value": {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				money: this.value
			}
		},
		methods: {
			// 隐藏模态窗
			hideModal(e) {
				this.$emit("hideModal")
			},

			// 确定
			makeSure(e) {
				this.$emit("makeSure", this.money)
			}
		}

	}
</script>

<style scoped>
	@import url("../static/css/main.css");
	@import url("../static/css/icon.css");

	.content {
		height: 280rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}

	.content input {
		height: 72rpx;
		text-align: center;
		width: 400rpx;
		border: 1px solid rgba(4, 3, 25, 0.2);
		border-radius: 4px;
		margin-right: 16rpx;
		line-height: 72rpx;
	}

	.content text {
		font-size: 32rpx;
		color: #040319;
		line-height: 32rpx;
		font-weight: bold;
	}
</style>
